<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
	<title>珠峰培训 - 微信：18310612838</title>
</head>

<body>
	<!-- 
		HASH路由
	 -->
	<!-- <div>
		<a href="#baidu">百度</a>
		<a href="#jingdong">京东</a>
		<a href="#taobao">淘宝</a>
	</div>
	<div id="box">
		百度
	</div> -->

	<script>
		/*
		 * HASH路由就是地址栏丑一些而已 
		 */
		/* function render() {
			let hash = location.href.substring(location.href.indexOf('#') + 1);
			if (hash === "" || hash === "baidu") {
				box.innerHTML = '百度';
			} else if (hash === "jingdong") {
				box.innerHTML = '京东';
			} else if (hash === "taobao") {
				box.innerHTML = '淘宝';
			}
		}
		render();
		window.onhashchange = render; */
	</script>



	<div id="nav">
		<a href="javascript:;">百度</a>
		<a href="javascript:;">京东</a>
		<a href="javascript:;">淘宝</a>
	</div>
	<div id="box">
		百度
	</div>
	<script>
		/*
		 * BROWSER路由是基于H5 History API实现的 
		 *   问题：基于pushState实现地址跳转（改变URL地址），地址变了，但是页面不刷新，此时我们监听到地址的改变，渲染不同的组件；但是，一旦我们手动刷新当前页面，此页面是不存在的，会报404错误，所以基于BROWSER实现的路由需要服务器做一些特殊的处理：
		 *    例如：如果客户端访问的页面不存在，给其返回的依然是首页的内容 (NGINX配置一下即可)
		 */
		/* window.onpopstate = function () {
			console.log(location.href);
		}; */
		let n = 0;
		nav.onclick = function (ev) {
			let target = ev.target,
				text = target.innerHTML;
			let url = 'baidu.html';
			switch (text) {
				case '淘宝':
					url = 'taobao.html';
					break;
				case '京东':
					url = 'jingdong.html';
					break;
			}
			window.history.pushState({
				xxx: ++n
			}, ++n, url);
		};
	</script>
</body>

</html>